<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
    <base href="${ctx }/">
    <title>收费设置</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="plugin/bootstrap-table/dist/bootstrap-table.css">
    <!-- <link rel="stylesheet" href="css/zoom.css" media="all" />  -->
    <link rel="stylesheet" href="alert/alert.css">
     <style type="text/css">
        a{
        color: #73879C;
        }
        #adds{
            margin-left: 26px;
        }
        #adds>table>tbody>tr>td{
            padding: 10px;
        }
    </style>
</head>
<body>
        <div>
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="javascript:void(0)">Fare Estimation Settings(报价系统)</a>
                </li>
                <li class="active">
                    <a href="view/priceRules/point_charges_list.jsp">Toll  Settings(收费设置)</a>
                </li>
            </ul>
        </div>
          <div class="form-group">
              &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="queryBtn" onclick="jump('view/priceRules/point_charges_list.jsp')" class="btn btn-primary" >Toll Point(收费点)</button>
                  <button type="button" id="queryBtn" onclick="jump('view/priceRules/point_charges_list_line.jsp')"  class="btn" style='background-color: white;border: 1px solid;'  >Toll Route(收费段)</button>
           </div> 
             <div class="form-inline" role="form" method="post" id="queryForm">
                <div class="form-group">
                    <label>Toll Point Name(收费点名称):</label>
                    <input type="text" id="pointChargesName"  class="form-control">
                </div>
                 <div class="form-group">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="doQuery1('demo-table',queryParams1())" class="btn btn-primary">Search  </button>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="queryBtn" onclick="addOrUpdate('')" class="btn btn-primary">Add</button>
                </div>	
            </div>
        <br>
        <p id="onLineNum" style='text-align: center;color: red;'></p>
    <table id="demo-table"></table>
   
</body>

<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-bootstrap-pagination.js"></script>
<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src='alert/alert.js'></script>
<!--时间  -->
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/common.js"></script>
<script src="plugin/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8">
function jump(url){
	window.location.href=url;
}

    $(function () {
        initPath("${ctx }");
        initTable('demo-table', queryParams, columns, "carCaculationPointCharges/getList");
        
    });

    var columns = [{field: '', title: 'Choose', checkbox: true},
        {
            field: 'pointChargesName',
            title: 'Toll Layer Name(收费点名称)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'cost',
            title: 'Amount(金额)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'position',
            title: 'Starting Point(起点经纬度)',
            align: 'center',
            valign: 'middle'
        },{
            field: 'endTollStation',
            title: 'End Point Name(终点名称)',
            align: 'center',
            valign: 'middle'
        },{
            field: 'endPosition',
            title: 'End Point Long & Lad(终点经纬度)',
            align: 'center',
            valign: 'middle'
        },
        {
            field: 'type',
            title: 'Category(类型)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
               return value==1?"Point":"Route";
            }
        },
        {
            field: 'createTime',
            title: 'Add the time(添加时间)',
            align: 'center',
            valign: 'middle',
            formatter: timeStamp2String,
        },
        {
            field: 'id',
            title: 'Operation(操作)',
            align: 'center',
            valign: 'middle',
            formatter: function (value, row, index) {
            	sessionStorage.setItem("pointCharge"+value, JSON.stringify(row)); 
                var str = '<a class="btn btn-info" style="margin-left:5px" href="javascript:void(0)" onclick="addOrUpdate('+value+')">Update</a>'
                    +'<a class="btn btn-info" style="margin-left:5px" href="javascript:void(0)" onclick="del('+value+')">Delete</a>';
                return str;
            }
        }
    ];
    function reg(id){
    	var text=$('#'+id+'').val();
    	 if(parseInt(text)<0){
    		 $('#'+id+'').css("border-color","#FF0000");
    		 $('#'+id+'').val('');
    		 }else{
    			$('#'+id+'').css("border-color","#ccc")
    		 }
    }
    function addOrUpdate(id){
    	var pointChargesName="";var cost="";var position="";var type="";var endPosition="";var endTollStation="";var roadName="";
    	if(id!=""){
    		var row=JSON.parse(sessionStorage.getItem("pointCharge"+id));
    		pointChargesName=row.pointChargesName==null?"":row.pointChargesName;
    		cost=row.cost==null?"":row.cost;
    		position = row.position==null?"":row.position;
    		type=row.type==null?"":row.type;
    		endPosition=row.endPosition==null?"":row.endPosition;
    		endTollStation=row.endTollStation==null?"":row.endTollStation;
    		roadName=row.roadName==null?"":row.roadName;
    	}
 			layer.open({
 	 			  type: 1,
 	 			  title: "Toll information",
 	 			  skin: 'layui-layer-rim', //加上边框
 	 			  area: ['520px', '660px'], //宽高
 	 			  content: ' <form id="adds"><table>'+
 	 			  '  <tr class="padtr"><td class="pad">Name(名称):</td> '+
 	 		       '<td><input type="text" class="form-control" name="pointChargesName" id="pointChargesName1"    value="'+pointChargesName+'"></td></tr>'+
 	 			  '  <tr class="padtr"><td class="pad">Amount(金额):</td> '+
 	        '<td><input type="number" class="form-control" name="cost" id="cost"   oninput="reg(\cost\')"" value="'+cost+'"><input type="hidden" name="id"value="'+id+'" ><input type="hidden" name="type" value="2" ></td></tr>'+
	        
	        
 	       '  <tr class="padtr"><td class="pad">Starting Point longitude(起点经度):</td> '+
	        '<td><input type="number" class="form-control" id="position1" value="" ></td></tr>'+
 	         '  <tr class="padtr"><td class="pad">Starting Point latitude(起点纬度):</td> '+
	        '<td><input type="number" class="form-control"  id="position2" value=""  ></td></tr>'
	        +
	         '  <tr class="padtr"><td class="pad">End Point Name(终点名称):</td> '+
 	        '<td><input type="text" class="form-control" name="endTollStation" id="endTollStation"    value="'+endTollStation+'"></td></tr>'+
	        
 	       '  <tr class="padtr"><td class="pad">Route Name(线路名称):</td> '+
	        '<td><input type="text" class="form-control" name="roadName" id="roadName"   value="'+roadName+'"></td></tr>'+
 	        
	        '  <tr class="padtr"><td class="pad">End Point longitude(终点经度):</td> '+
	        '<td><input type="number" class="form-control" id="position3"   ></td></tr>'+
 	         '  <tr class="padtr"><td class="pad">End Point latitude(终点纬度):</td> '+
	        '<td><input type="number" class="form-control"  id="position4"   ></td></tr>'+
	        
	        
 	        '<tr align="center" class="padtr"><td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
 	        ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
 	        ' <button type="button" onclick="save('+id+')" class="btn btn-info btn1">&nbsp;Save&nbsp;&nbsp;</button>'+
 	        '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
 	        '<button type="button" onclick="cacel()" class="btn btn-info btn1">&nbsp;&nbsp;Cancel&nbsp;&nbsp;</button></td></tr></table></form>'
 	 			});
 			if(id!=""){
 	    		var pos = position.split(",");
 	    		var position1 = pos[0];
 	    		var  position2 = pos[1];
 	    		var endPos = endPosition.split(",");
 	    		var position3 = endPos[0];
 	    		var  position4 = endPos[1];
 	    		$('#position1').val(position1);$('#position2').val(position2);$('#type').val(type);
 	    		$('#position3').val(position3);$('#position4').val(position4);
 	    	}
 	}
    
    function save(id){
    	var data = serialize('adds');//获取表单内容
    	if(data.pointChargesName==""){
    		 layer.msg("Name cannot be empty");
			 return;
    	}
    	if(data.cost==""){
   		 layer.msg("Amount cannot be empty");
			 return;
   	    }
    	var position1=$('#position1').val();var position2=$('#position2').val();
    	if(position1==""||position2==""){
    		layer.msg("Starting Point Lon & Lad  cannot be empty");
			 return;
    	}
    	if(data.roadName==""){
    		layer.msg(" Route Name cannot be empty ");
			 return;
    	}
    	data.position=position1+","+position2;
    	var position3=$('#position3').val();var position4=$('#position4').val();
    	if(position1==""||position2==""){
    		layer.msg(" End point Lon & Lad  cannot be empty");
			 return;
    	}
    	data.endPosition=position3+","+position4;
    	console.log(data);
    	 $.ajax({
             type: "post",
             url: "carCaculationPointCharges/addOrUpdate",
             data: JSON.stringify(data),
             contentType:"application/json;charset=UTF-8", 
             dataType:"json",
             success: function(data){    	            	 
            if(data.code==200){
            	 window.location.reload();    
      	       }else{
      	    	    layer.msg(data.msg);
      	       }
                      }
         }); 
    	
    	
    }
    function cacel(){
    	layer.closeAll();
    }
    function del(id){
    	var  flag =  confirm("Are you sure you want to delete?");			
		 if(flag){
			 $.ajax({
		            type: "get",
		            url: "carCaculationPointCharges/del?id="+id,
		            dataType:"json",
		            success: function(data){    
		           	  console.log(data)
		          	  if(data.code==200){	
		          		layer.msg("Delete Successful");
		          		 window.location.reload(); 	
			        	 }else{
			        		  layer.msg(data.msg); 
			        	 }
		       }
		        }); 
	  }
    }
    
    function queryParams(params) {
        var param = {
        	 pointChargesName: $('#pointChargesName').val(),
             type:2,
            pageNo: this.pageNumber,
            pageSize: this.pageSize
        }
        return param;
    }

    
    function queryParams1() {
        var param = {
        		pointChargesName: $('#pointChargesName').val(),
                type:2,
                pageNo: 1,
                pageSize: this.pageSize
        }
        return param;
    }
  
</script>
</html>


